<template>
  <el-row :gutter="0" class="poster-container">
    <el-col :span="24" :offset="0">
      <div class="big-box">
        <a :href="getFullPath(props.poster.targetUrl)" target="_self">
          <img
            class="image-source"
            :src="props.poster.bigImage"
            loading="lazy"
          />
        </a>
      </div>
      <div class="small-box">
        <a :href="getFullPath(props.poster.targetUrl)" target="_self">
          <img
            class="image-source"
            :src="props.poster.smallImage"
            loading="lazy"
          />
        </a>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import type { PosterPops } from "./../../../types/Home";
  import { getFullPath } from "@/utils/path";
  const props = defineProps<{ poster: PosterPops }>();
</script>

<style scoped lang="scss">
  .poster-container {
    margin: 5px;
  }

  .image-source {
    border-radius: 5px;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .big-box {
    display: block;
  }

  .small-box {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .big-box {
      display: none;
    }
    .small-box {
      display: block;
    }
  }
</style>
